<template>
  <div class="card" :class="className">{{ labelText }}</div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { tagType } from "@/enum/global.ts";
const props = defineProps({
  labelText: {
    type: String,
    default: "",
  },
  labelCode: {
    type: String,
    default: "",
  },
});

// 计算标签的class名
const className = computed(() => {
  return Object.keys(tagType).map((key) => {
    if (tagType[key].includes(props.labelText)) {
      return key;
    }
  });
});
</script>

<style lang="scss" scoped>
.card {
  display: inline;
  padding: 0 6px;
  color: #fff;
  line-height: 20px;
  border-radius: 3px;

  &.blue {
    background: linear-gradient(136deg, #3eacff, #1d74ff 97%);
  }

  &.purple {
    background-color: #6a5acd;
  }

  &.green {
    background-color: #0dbf66;
  }

  &.orange {
    background: linear-gradient(135deg, #ffc23d, #ff9621);
  }

  // 青色、蓝绿色
  &.cyan {
    background: #0fc6c2;
  }

  // 灰色
  &.gray {
    background: #aeafb2;
  }
}
</style>

